import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import * as MarketActions from '../actions/MarketActions';
import * as Discover from '../config/page/Discover';
import {
  ListGroup,
  ListGroupItem
} from 'react-bootstrap';

import * as Apis from '../config/Apis';
import * as Shell from '../common/Shell';
import * as Util from '../common/Util';
import Container from '../components/Container';
import ListItem from '../components/ListItem';
import Notify from '../common/Notification';

class DiscoverApp extends React.Component {

  constructor () {
    super();   
  }

  static propTypes = {
    market: React.PropTypes.object.isRequired,
    dispatch: React.PropTypes.func.isRequired
  }

  componentDidMount(){
    this.props.marketAction.fetchMarket();
  }

  formatDiscoverData(){

      let { market } = this.props;
      let discoverItems = Discover.items;
      if( discoverItems && discoverItems.length ){
          let marketCurrent = ((market && market.results && market.results.length) ? market.results[0].current : "");
          let data = {
            current : marketCurrent,
            profit : "4%"
          };
          discoverItems.map((item, i) =>{
              if(i === 0){
                  item.extra = `上证指数：${data.current}`;
              }
              /*
              if(i ===2 ){
                  item.extra = `最低年化 ${data.profit}`;
              }
              */
          });
      }

      return discoverItems;
  }

  onDownloadSuccess(data){
    Notify.makeNotify("应用下载中");
  }

  onMarketIndexClick(event){
    event.preventDefault();
    let params = { url: Apis.marketApi, showCloseBtn : true, title :'市场行情' };
    Shell.callShellMethod( "webViewPlugin", null, null, params );
  }

  onAccountClick(event){
    event.preventDefault();
    Shell.callShellMethod("callOpenAccountPlugin");
  }

  onAppDownload(downloadConfig){
    let deviceInfo = Util.getDeviceType();
    let downloadUrl = null;
    if (deviceInfo.isIOS === true) {
      downloadUrl = downloadConfig.ios;
    }else{
      downloadUrl = downloadConfig.android;
    }

    Shell.callShellMethod(
      "downloadOtherAppPlugin", 
      this.onDownloadSuccess.bind(this), 
      null, 
      {url : downloadUrl}
    );
  }

  onExpertClick(event){
    event.preventDefault();
    let perfessionalDownloadApi = Apis.expertAppApi;
    this.onAppDownload(perfessionalDownloadApi);
  }

  onColorLifeClick(event){
    event.preventDefault();
    let perfessionalDownloadApi = Apis.colorLifeAppApi;
    this.onAppDownload(perfessionalDownloadApi);
  }

  render() {
    let discoverItems = this.formatDiscoverData();

    return (
          <Container 
              isGoBack={false} 
              isHeader={true} 
              isHeaderMessage={true}
              isFooter={true} 
              footerIndex={2} 
              headerTitle={"发现"}>

              <div className="blank20"></div>

              <ListGroup>
              { 
                discoverItems && discoverItems.map(
                  (item, i) => (
                      item.onclick ? 
                      <ListItem item={ item } onClickHandle={ this[item.onclick].bind(this) }/>
                      :
                      <ListItem item={ item } />
                  )
                )
              }
              </ListGroup>

          </Container>
    );
  }
}

export default connect(state => ({
    market: state.market,
    auth: state.auth
}), dispatch => ({
    marketAction: bindActionCreators(MarketActions, dispatch)
}))(DiscoverApp);
